import React, { useState, useEffect } from 'react'
import { message, Table, Pagination, Button, Input, Select } from 'antd';
import axios from 'axios';
export default function Overhaul() {
  const [option, setOption] = useState([])
  const [nowOption, setNowOption] = useState([])
  const [selectionType, setSelectionType] = useState('checkbox');
  const [btnText, setBtnText] = useState("连接扫码枪")
  const [proId, setProId] = useState("")
  const [messageApi, contextHolder] = message.useMessage();
  const [dataSource, setDataSource] = useState([])
  const [dataTotal, setDataTotal] = useState("0")
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: "center",
      fixed: "left",
      width: "5%",
      render: (text, record, index) => {
        return <span style={{ fontSize: "12px" }}>{index + 1}</span>
      }
    },
    {
      title: '零件批次',
      dataIndex: 'partbatch',
      key: 'partBatch',
      align: "center",
      fixed: "left",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '零件名称',
      dataIndex: 'partname',
      key: 'partName',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: "生产公司",
      dataIndex: 'procompany',
      key: 'proCompany',
      align: "center",
      className: "wrapTitle",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '购进时间',
      dataIndex: 'buytime',
      key: 'buyTime',
      align: "center",
      className: "wrapTitle",
      width: "10%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '生产时间',
      dataIndex: 'protime',
      key: 'protime',
      align: "center",
      className: "wrapTitle",
      width: "8%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '备注',
      dataIndex: 'comment',
      key: 'comment',
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    }
  ];

  useEffect(() => {
    axios.get("/com/selectcom").then(res => {
      setOption(res.data)
      setNowOption(res.data[0].value)
    })
  }, [])
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {

    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  const openCom = () => {
    if (btnText === "连接扫码枪") {
      axios.get("/com/opencom?com=" + nowOption).then(res => {
        if (res.data !== 500) {
          if (res.data !== 200) {
            setBtnText("断开扫码枪")
            setProId(res.data)
          }

        } else {
          messageApi.info('连接失败!');
          setBtnText("连接扫码枪")
          axios.get("/com/closecom").then(res => {
            messageApi.info('请重新连接!');

          })
        }

      })
      setBtnText("断开扫码枪")
    } else {
      axios.get("/com/closecom").then(res => {
        if (res.data) {
          messageApi.info('断开成功!');
          setBtnText("连接扫码枪")
        } else {
          messageApi.info('断开失败!');
        }

      })
    }

  }
  const handleChange = (value) => {
    setNowOption(value)
  };
  const selectPart = () => {
    axios.get("/part/getpart?proId=" + proId).then(res => {
      setDataSource(res.data)
      setDataTotal(res.data.length)
    })
  }
  return (
    <div>
      {contextHolder}
      <div >
        <Select
          style={{
            width: 150,
            textAlign: "left"
          }}
          value={nowOption}
          onChange={handleChange}
          options={option}
        />
        <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }} onClick={() => { openCom() }}>{btnText}</Button>
        <Input placeholder="产品标识码" style={{ width: "530px", margin: "0 0 0 100px" }} disabled value={proId} />

        <Button type="primary" style={{ color: "white", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }} onClick={() => { selectPart() }}>查询</Button>
      </div>
      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        columns={columns} dataSource={dataSource} style={{ margin: "5px 0 0 0" }}
        pagination={{ pageSize: 10 }}
        size='small'
        scroll={{ x: 1200 }}
      >
      </Table>

    </div >
  )
}
